// 对axios进行二次封装
//    axios本身是一个独立的库，是对ajax的封装。为了方便在项目中使用，我们对它再次封装
// (1) 接口基地址
// (2) 请求，响应拦截器
import axios from 'axios'
// 要封装的内容有
import store from '@/store/index.js'
// 引入路由
import router from '../router/index.js'
// 对bigint处理：transformResponse
// 请求拦截器 响应拦截器
// 基地址 可能提供基地址的服务器有两台
import BigInt from 'json-bigint'
// 处理后台响应的整数超出精度的问题
// 自定义的方式设置axios实例
const instance1 = axios.create({
  // 后端服务器1
  baseURL: 'http://ttapi.research.itcast.cn'
  // baseURL: 'http://api-toutiao-web.itheima.net'
  // timeout: 1000,
  // headers: {'X-Custom-Header': 'foobar'}
})
// 后台返回的大整数处理
instance1.defaults.transformResponse = [function (data) {
  // 对 data 进行任意转换处理
  // 补充transformresponse处理大整数问题 transformResponse可以处理后端响应的数据
  try {
    // data:就是本次请求获取的数据
    // 在这里可以对它进行进一步的处理 -- JSONbig
    // 后端返回数据可能不是 JSON 字符串，而JSONbig.parse()只能处理JSON字符串
    // 所以，为了保证代码可以正常执行，这里引入try-catch来捕获异常
    // 如果后台返回的是json字符串数据就可以使用bigint进行对大整数操作
    // 如果没有遇到错误，就返回 JSONBig处理之后的数据
    return BigInt.parse(data)
  } catch (err) {
    // 由于它只能处理json字符串格式 但如果后台返回的不是json格式则原样输出
    console.log('jsonbig转换出错', err)
    return data
  }
}]
// 设置请求拦截去进行拦截请求对请求进行token值的携带
// 请求拦截器
// 所有请求发出去之前会执行的函数，都会处理的逻辑。
// 添加请求拦截器
instance1.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 检查vuex中是否有token信息，如果有，就加到header中
  const token = store.state.tokenInfo.token
  console.log('axios的请求拦截器是否携带token：' + token)
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
// 响应拦截器处理token失效的问题
// 添加一个响应拦截器 -- 所有的请求在发回来之后，都会到这里来
instance1.interceptors.response.use(function (response) {
  // 对相应数据做点什么
  return response
}, async function (error) {
  // 对响应错误做点什么
  console.log('响应拦截器，拦截到了错误')
  if (error.response && error.response.status === 401) {
    // 2.遇到了401错误
    const refreshToken = store.state.tokenInfo.refresh_token
    if (refreshToken) {
      // 3. 用resfreshToken再发请求
      try {
        const result = await axios({
          method: 'PUT',
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          headers: {
            Authorization: `Bearer ${refreshToken}`
          }
        })
        // 4. 成功获取新token
        console.log('用refresh_token取回来的新的token', result)
        const newToken = result.data.data.token
        // 5. 保存新token到vuex
        store.commit('mSetToken', {
          token: newToken,
          refresh_token: refreshToken
        })
        // 6. 重新发请求
        // error.表示401错误。error.config表示出这个错误时，所要发出的请求的配置
        return instance1(error.config) // 重新去发一次请求
      } catch (err) {
        console.log('用refresh_token更新token失败, 只能去做一次登陆')
        // 路由跳转
        router.push('/login?jumpto=' + router.currentRoute.fullPath)
      }
    } else {
      router.push('/login?jumpto=' + router.currentRoute.fullPath)
      return Promise.reject(new Error('你没有登录啦~~~~'))
    }
  } else {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
})
// 对后端的接口进行封装
export const createAPI = (url, method, data) => {
  const config = {}
  if (method === 'get') {
    config.params = data
  } else {
    config.data = data
  }
  return instance1({
    url,
    method,
    ...config
  })
}

export const createFormAPI = (url, method, data) => {
  const config = {}
  config.data = data
  config.headers = {
    'Cache-Control': 'no-cache',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
  config.responseType = 'json'
  config.transformRequest = [
    function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }
  ]
  return instance1({
    url,
    method,
    ...config
  })
}

const instance2 = axios.create({
  // 后端服务器2
  baseURL: 'http://api-toutiao-web.itheima.net'
  // timeout: 1000,
  // headers: {'X-Custom-Header': 'foobar'}
})

export { instance1, instance2 }

// 默认导出intance1
export default instance1
